import Vue from 'vue'
import VueRouter from 'vue-router'

const originalPush = VueRouter.prototype.push;  // 保存原始的push方法，为了在修改后的push方法中调用原始的push方法
VueRouter.prototype.push = function push(location) {           // 重写了Vue Router原型链上的push方法
  return originalPush.call(this, location).catch(err => err);  // 新的push方法在调用原始的push方法后，使用.catch方法捕获任何可能发生的错误，并返回错误对象
}

Vue.use(VueRouter)  // 使用Vue Router插件

// 路由配置数组，用于前端路由管理。每个路径对应的页面如下
const routes = [
  {
    path: '/', // 父路由
    component: () => import('../components/home'),  // 使用动态导入，只有在访问该路由时，才会加载对应的组件
    children: [{  // 子路由（子路由是嵌套在当前路由下的。子路由的路径是相对于父路由的）
      path: "/",
      name: "index",
      component: () => import('../components/index')
    }, {
      path: "/sort",
      name: "sort",
      component: () => import('../components/sort')
    }, {
      path: "/article/:id",
      name: "article",
      component: () => import('../components/article')
    }, {
      path: "/weiYan",
      name: "weiYan",
      component: () => import('../components/weiYan')
    }, {
      path: "/jotting",
      name: "jotting",
      component: () => import('../components/jotting')
    }, {
      path: "/love",
      name: "love",
      component: () => import('../components/love')
    }, {
      path: "/favorite",
      name: "favorite",
      component: () => import('../components/favorite')
    }, {
      path: "/travel",
      name: "travel",
      component: () => import('../components/travel')
    }, {
      path: "/message",
      name: "message",
      component: () => import('../components/message')
    }, {
      path: "/about",
      name: "about",
      component: () => import('../components/about')
    }, {
      path: "/user",
      name: "user",
      component: () => import('../components/user')
    }, {
      path: "/letter",
      name: "letter",
      component: () => import('../components/letter')
    }]
  },
  {
    path: '/admin',
    redirect: '/welcome',  // 当访问'/admin'路径时，会重定向到'/welcome'路径，并且需要认证
    meta: {requiresAuth: true},
    component: () => import('../components/admin/admin'),
    children: [{
      path: '/welcome',
      name: 'welcome',
      component: () => import('../components/admin/welcome')
    }, {
      path: '/main',
      name: 'main',
      component: () => import('../components/admin/main')
    }, {
      path: '/webEdit',
      name: 'webEdit',
      component: () => import('../components/admin/webEdit')
    }, {
      path: '/userList',
      name: 'userList',
      component: () => import('../components/admin/userList')
    }, {
      path: '/postList',
      name: 'postList',
      component: () => import('../components/admin/postList')
    }, {
      path: '/postEdit',
      name: 'postEdit',
      component: () => import('../components/admin/postEdit')
    }, {
      path: '/sortList',
      name: 'sortList',
      component: () => import('../components/admin/sortList')
    }, {
      path: '/configList',
      name: 'configList',
      component: () => import('../components/admin/configList')
    }, {
      path: '/commentList',
      name: 'commentList',
      component: () => import('../components/admin/commentList')
    }, {
      path: '/treeHoleList',
      name: 'treeHoleList',
      component: () => import('../components/admin/treeHoleList')
    }, {
      path: '/resourceList',
      name: 'resourceList',
      component: () => import('../components/admin/resourceList')
    }, {
      path: '/loveList',
      name: 'loveList',
      component: () => import('../components/admin/loveList')
    }, {
      path: '/resourcePathList',
      name: 'resourcePathList',
      component: () => import('../components/admin/resourcePathList')
    }]
  },
  {
    path: '/verify',
    name: 'verify',
    component: () => import('../components/admin/verify')
  }
]

const router = new VueRouter({  // VueRouter是Vue.js官方的路由管理器，用于构建单页面应用（SPA）
  mode: "history",  // mode选项指定了路由的模式。"history"模式使用HTML5的History API来实现URL的无刷新跳转
  routes: routes,   // routes选项定义了路由规则，即URL路径和组件之间的映射关系
  // scrollBehavior函数接收三个参数：to（目标路由对象）、from（当前路由对象）、savedPosition（滚动位置）
  scrollBehavior(to, from, savedPosition) {  // scrollBehavior是一个函数，用于定义路由跳转时的滚动行为
    return {x: 0, y: 0}                      // 返回一个对象{x: 0, y: 0}，表示每次路由跳转时页面都会滚动到顶部（x轴和y轴都为0）
  }
})

// 路由守卫，用于在Vue.js应用中进行路由跳转前的权限验证。它通常用于单页应用（SPA）中，以确保用户在访问某些路由之前已经通过身份验证
router.beforeEach((to, from, next) => {   // 在每次路由跳转前被调用
  if (to.matched.some(record => record.meta.requiresAuth)) {  // 检查即将要跳转的路由是否包含meta.requiresAuth属性，这个属性通常用于标记某些路由需要身份验证
    if (!Boolean(localStorage.getItem("adminToken"))) {       // 如果localStorage中用户的身份验证令牌拿不到则表示用户未登录
      next({
        path: '/verify',
        query: {redirect: to.fullPath}  // 重定向用户到 /verify 路由，并通过query函数传递目标路由的完整路径
      });
    } else {    // 如果用户已经登录，则允许用户继续跳转到目标路由
      next();
    }
  } else {  // 如果是不需要身份验证的页面则直接跳转到目标路由
    next();
  }
})

export default router  // 模块导出语句，用于将一个名为router的对象或函数导出，以便在其他模块中可以导入并使用它
